/**
* 描述：头部
*/
<style lang="scss" scoped>
  @import 'src/styles/vars';
  @import 'src/styles/mixins';
  .header {
    position: absolute;
    top: 0;
    right: 0;
    @include wh(100%, 58px);
    line-height: 58px;
    background: #d7dde4;
    padding-left: 0px;
    box-shadow:0px 2px 10px -2px $border_color;
    border-bottom:1px solid $border_color;
    user-select: none;
    z-index: 998;
    span.header-title {
      cursor: pointer;
      display: inline-block;
      padding-left: 15px;
      font-size: 25px;
      color: inherit ;
    }
    .header-admin {
      float: right;
      li {
        float: left;
        position: relative;
        a {
          position: relative;
          line-height: 1;
          color: inherit;
          font-weight: 400;
        }
        &.header-dropMenu {
          padding-left: 11px;
          padding-right: 15px;
          .header-drop {
            color: #000;
            font-size: 12px !important;
            position: absolute;
            left: 65px;
            top: 40px;
            width: 100% - 50;
            line-height: 1.5;
            padding: 10px 0;
            text-align: center;
            border: 1px solid #F5F5F5;
            border-top: 1px solid transparent;
            border-right: 1px solid transparent;
            background: #FFF;
          }
          p {
            padding: 5px 0;
            a:hover {
              color: #62B0E4;
            }
          }
          .header-caret {
            margin-left: 4px;
            display: inline-block;
            color: inherit ;
            transition: transform 0.5s;
          }
          &:before {
            content: '';
            @include wh(1px, 100%);
            position: absolute;
            top: 0;
            left: 0px;
            z-index: 10;
            background: transparent;
            transition: background 0.5s;
          }
          &.active {
            .header-caret {
              transform: rotate(0.5turn);
            }
          }
          &.active:before {
            background: #d7dde4;
          }
        }
      }
    }
  }
  .login-out{
    font-size: 14px;
    margin-left: 5px;
    color: inherit  !important;
    cursor: pointer
  }
  .icon-out {
    margin-left: 10px;
    margin-top: 13px;
    cursor: pointer;
    font-weight: bold;
  }
  .icon-in {
    margin-left: 10px;
    margin-top: 13px;
    cursor: pointer;
  }
  // 动画
  .drop-enter-active,
  .drop-leave-active {
    transition: all 0.5s ease-in-out;
  }
  .drop-enter, .drop-leave-to {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  // 动画
  .slide-top-enter-active,
  .slide-top-leave-active {
    transition: all 0.5s;
  }
  .slide-top-enter, .slide-top-leave-to {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  @keyframes wobble {
    16.65% {
      transform: skew(0deg) scale(1, 1);
    }
    16.65% {
      transform: skew(-10deg) scale(1.1, 1.1);
    }
    33.3% {
      transform: skew(10deg) scale(1.1, 1.1);
    }
    49.95% {
      transform: skew(-6deg) scale(1.1, 1.1);
    }
    66.6% {
      transform: skew(4deg) scale(1.1, 1.1);
    }
    83.25% {
      transform: skew(-2deg) scale(1.1, 1.1);
    }
    100% {
      transform: skew(0) scale(1, 1);
    }
  }
</style>
<template>
  <div class="header">
    <transition name="fadeLeft">
      <Icon v-if="sidebar_an" type="arrow-swap" size="25" color="#inherit" class="icon-in" @click="zoom()"></Icon>
      <Icon v-else type="navicon" size="30" color="#inherit" class="icon-out" @click="zoom()"></Icon>
    </transition>
    <ul class="header-admin">
      <li class="header-dropMenu" :class="classes">
        <img :src="'static/images/touxiang.png'" style="margin-right: 10px;" alt="touxiang" height="40"/>
        <a href="javascript:void(0);" @mouseover="mouseover()" @mouseout="mouseout()">
          <span style="font-size: 16px;">Hi， {{mgeUserInfo.realName}}</span>
          <i class="el-icon-caret-bottom header-caret" :class="classes"></i>
        </a>
        <transition name="slide-top">
          <div class="header-drop" v-if="state" @mouseover="mouseover()" @mouseout="mouseout()">
            <p>
              <a href="javascript: void(0);">账户信息</a>
            </p>
            <p>
              <a href="javascript: void(0);">密码修改</a>
            </p>
          </div>
        </transition>
        <span style="margin-left: 5px;color: #E0E0E0">|</span>
        <a class="login-out" @click="loginOut()">退出</a>
      </li>
    </ul>
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions } from 'vuex';
  let timer = null;

  export default {
    name: 'mgeHeader',
    data () {
      return {
        state: false                // 展开/收缩状态
      };
    },
    computed: {
      ...mapState([
        'sidebar_an',
        'mgeUserInfo'
      ]),
      classes () {
        return {
          'active': this.state
        };
      }
    },
    async created () {
      if (!this.mgeUserInfo.realName) await this.getMgeUserInfo();
    },
    methods: {
      ...mapMutations([
        'SIDEBAR_AN'
      ]),
      ...mapActions([
        'getMgeUserInfo'
      ]),
      zoom () {
        let state = !this.sidebar_an;
        this.SIDEBAR_AN({state: state});
      },
      // 鼠标移入
      mouseover () {
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        this.state = true;
      },
      // 鼠标移出
      mouseout () {
        timer = setTimeout(() => {
          this.state = false;
        }, 500);
      },
      // 退出
      loginOut () {
        this.$router.push({path: '/mge/login'});
      }
    }
  };
</script>
